<template>
	<div class="home">
		<el-table
			:data="tableData"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
		>
			<el-table-column label="我的成绩列表">
				<el-table-column prop="examinationName" label="试卷名称"> </el-table-column>
				<el-table-column prop="examTime" label="考试时长"> </el-table-column>
				<el-table-column prop="achievement" label="分数"> </el-table-column>
				<el-table-column label="是否考过">
					<template slot-scope="scope">是</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template slot-scope="scope">
						<el-button type="text" @click="enterExam(scope.row)">查看试卷</el-button>
						<el-button type="text" @click="setCollection(scope.row)"
							>{{ scope.row.isCollection ? '取消收藏' : '收藏试题' }}
						</el-button>
						<el-button type="text" @click="enterEstimate(scope.row)">评价试题</el-button>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>
		<el-pagination
			align="center"
			background
			layout="total,prev, pager, next"
			:page-size="5"
			:total="total"
			@current-change="currentChange"
		>
		</el-pagination>
	</div>
</template>

<script>
	import { getRecord, setCollection } from '@/api/user';
	export default {
		data() {
			return {
				tableData: [],
				currPage: 1,
				total: 0,
			};
		},
		created() {
			this.getRecord();
		},
		methods: {
			async getRecord() {
				let params = {
					currPage: this.currPage,
					pageSize: 5,
				};
				let {
					data: {
						data: { list, total },
					},
				} = await getRecord(params);
				this.tableData = list;
				console.log(list, 'list');
				this.total = total;
			},
			currentChange(v) {
				this.currPage = v;
				this.getRecord();
			},
			enterExam(row) {
				row.id = row.examinationId;
				this.$router.push({
					path: '/exam-check',
					query: row,
				});
			},
			async setCollection(row) {
				let { examinationId: id, isCollection } = row;
				this.$set(row, 'isCollection', !isCollection);
				let params = { id };
				let {
					data: { msg },
				} = await setCollection(params);
				this.$modal.msgSuccess(msg);
			},
			enterEstimate(row) {
				this.$router.push({
					path: '/comment',
					query: row,
				});
				console.log(row, 'row');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		.el-table {
			margin: 20px auto;
			width: 1000px !important;
		}
	}
	.home ::v-deep .is-group .el-table__cell {
		background: #fff;
	}
	.home ::v-deep .is-group tr:first-child .el-table__cell {
		background: rgb(222, 184, 137);
		color: #000;
		height: 60px;
	}
</style>
